<template>
  <div class="lowOfAssets blue-border">
    <div class="top">
      <div>
        <div class="title">设备类别占比-金额</div>
        <pieChart ref="amountChart" id="amountChart"></pieChart>
      </div>
      <div>
        <div class="title">设备状态占比</div>
        <pieChart ref="statusChart" id="statusChart"></pieChart>
      </div>
      <div>
        <div class="title">设备维修占比</div>
        <pieChart ref="maintenanceChart" id="maintenanceChart"></pieChart>
      </div>
    </div>
    <div class="bottom">
      <tableBox :data="tableData"></tableBox>
    </div>
  </div>
</template>
<script>
import pieChart from "../../../erp/stashReportBI/components/pieChart.vue"
import tableBox from "./table-box.vue"
export default {
  components: { pieChart, tableBox },
  data() {
    return {
      tableData: [
        [{ val: "序号" }, { val: "设备名称" }, { val: "型号" }, { val: "数量" }, { val: "原值" }, { val: "折旧" }, { val: "净值" }, { val: "增值" }, { val: "维修" }, { val: "新机", style: "color:#639FDA" }, { val: "在用", style: "color:#F37F36" }, { val: "限制", style: "color:#ADADAD" }, { val: "维修", style: "color:#FDC508" }],
        [{ val: 1 }, { val: '手推洗地机' }, { val: 'M2' }, { val: '三才tri-leverl' }, { val: 38 }, { val: 208962 }, { val: 10 }, { val: 62485 }, { val: 10 }, { val: 62485 }, { val: 38 }, { val: 62485 }, { val: 38 }],
        [{ val: 2 }, { val: '手推洗地机' }, { val: 'M2' }, { val: '三才tri-leverl' }, { val: 38 }, { val: 208962 }, { val: 10 }, { val: 62485 }, { val: 10 }, { val: 62485 }, { val: 38 }, { val: 62485 }, { val: 38 }],
        [{ val: 3 }, { val: '手推洗地机' }, { val: 'M2' }, { val: '三才tri-leverl' }, { val: 38 }, { val: 208962 }, { val: 10 }, { val: 62485 }, { val: 10 }, { val: 62485 }, { val: 38 }, { val: 62485 }, { val: 38 }],
        [{ val: 4 }, { val: '手推洗地机' }, { val: 'M2' }, { val: '三才tri-leverl' }, { val: 38 }, { val: 208962 }, { val: 10 }, { val: 62485 }, { val: 10 }, { val: 62485 }, { val: 38 }, { val: 62485 }, { val: 38 }],
        [{ val: 5 }, { val: '手推洗地机' }, { val: 'M2' }, { val: '三才tri-leverl' }, { val: 38 }, { val: 208962 }, { val: 10 }, { val: 62485 }, { val: 10 }, { val: 62485 }, { val: 38 }, { val: 62485 }, { val: 38 }],
        [{ val: 6 }, { val: '手推洗地机' }, { val: 'M2' }, { val: '三才tri-leverl' }, { val: 38 }, { val: 208962 }, { val: 10 }, { val: 62485 }, { val: 10 }, { val: 62485 }, { val: 38 }, { val: 62485 }, { val: 38 }],
        [{ val: 7 }, { val: '手推洗地机' }, { val: 'M2' }, { val: '三才tri-leverl' }, { val: 38 }, { val: 208962 }, { val: 10 }, { val: 62485 }, { val: 10 }, { val: 62485 }, { val: 38 }, { val: 62485 }, { val: 38 }],
        [{ val: 8 }, { val: '手推洗地机' }, { val: 'M2' }, { val: '三才tri-leverl' }, { val: 38 }, { val: 208962 }, { val: 10 }, { val: 62485 }, { val: 10 }, { val: 62485 }, { val: 38 }, { val: 62485 }, { val: 38 }],
      ]
    }
  },
  mounted() {
    let data1 = [{ value: 1048, name: '公司' },
    { value: 735, name: '项目' },]
    let data2 = [{ value: 1048, name: '公司1' },
    { value: 735, name: '项目1' },]
    let data3 = [{ value: 1048, name: '公司2' },
    { value: 735, name: '项目3' },]
    this.$refs.amountChart.initChart(data1)
    this.$refs.statusChart.initChart(data2)
    this.$refs.maintenanceChart.initChart(data3)
  }

}
</script>
<style lang="scss" scoped>
@import 'border.css';

.lowOfAssets {
  width: 100%;
  height: 100%;
  padding: 25px 21px;
  display: flex;
  flex-direction: column;

  .title {
    font-weight: 400;
    font-size: 20px;
    color: #000000;
    text-align: center;
  }

  .top {
    height: 40%;
    display: flex;

    >div {
      //flex-grow: 1;
      width: 33%;
    }

    >div:nth-child(2) {
      border-left: 1px solid #DDDDDD;
      border-right: 1px solid #DDDDDD;
    }
  }

  .bottom {
    margin-top: 30px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }
}
</style>